<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>22001010205白博文-聊天页面</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./icon/iconfont.css">
    <link rel="stylesheet" href="./css/goods.css">
    <link rel="stylesheet" href="./css/tabbar.css">
    <link rel="stylesheet" href="./css/liaotian.css">
</head>
<body>
    <div class="bai_header">
        <span>聊天</span>
    </div>
    <div class="bai_banner">
        <div class="bai_banner_content">
            <span class="bai_banner_content_title">
                领<span class="bai_banner_content_title_active">先用后付</span>专属资格
            </span>
            <span  class="bai_banner_content_text">可享0元下单，确认收货后再付款</span>
        </div>
        <div class="bai_banner_button">
                立即领取
        </div>
    </div>
    <div class="bai_nav">
        <span class="bai_nav_title">
            <span class="iconfont icon-xiaoxi"> </span>
            <span>已折叠一周前的消息</span>
        </span>
        <span class="bai_nav_action">展开 <span class="iconfont icon-a-zu1679"></span></span>
    </div>
    <div class="bai_bar">
        <span class="iconfont icon-xiai"></span>
        <span>精选推荐</span>
    </div>
    <div class="bai_goods"></div>
    <div class="bai-tabbar">
        <a href="./index.html">
            <section class="bai-tabbar-item">
                <span class="iconfont icon-shouye"></span>
                <span class="bai-tabbar-item-text">首页</span>
            </section>
        </a>
        <a href="./12.html">
            <section class="bai-tabbar-item">
                <span class="iconfont icon-1212"></span>
                <span class="bai-tabbar-item-text">12.12</span>
            </section>
        </a>
        <a href="./liaotian.html">
            <section class="bai-tabbar-item" style="color: #e02e24;">
                <span class="iconfont icon-chat"></span>
                <span class="bai-tabbar-item-text">聊天</span>
            </section>
        </a>
        <a href="./wode.html">
            <section class="bai-tabbar-item" >
                <span class="iconfont icon-gerenzhongxin-zhihui"></span>
                <span class="bai-tabbar-item-text">我的</span>
            </section>
        </a>
</body>
<script>
    const goods = document.querySelector('.bai_goods');
     const renderHtml = (data) => {
        goods.innerHTML = data.map((item)=>{
            return(
                `
                 <div class="bai_goods_item">
            <img src=${item.img} class="bai_goods_item_img"/>
            <p class="bai_goods_item_title">${item.title}</p>
            <div class="bai_goods_item_content">
                <span class="bai_goods_item_content_price">¥${item.price}</span>
                <span class="bai_goods_item_content_quantity">已售${item.quantity}件</span>
            </div>
        </div>
                `
            );
        }).join("");
    }
     const getData = async () =>{
        let resp = await fetch('http://localhost:3000/goods2');
        let result = await resp.json();
        renderHtml(result);
        
    }
    getData();
</script>
</html>